<!DOCTYPE html>
<html lang="en" class="x-admin-sm">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>编辑网站观众信息</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="./assets/layui/layui.js"></script>
</head>
<!--作者联系 QQ 1420527913   毕设成品下载网址  codebag.cn-->
<body class="childrenBody">
    <div id="app">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>编辑网站观众信息</legend>
        </fieldset>
        <div class="layui-form" style="width: 80%;">
            <div class="layui-form-item"><label class="layui-form-label">观众名</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="username" v-model="username"
                        placeholder="请输入观众名" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">姓名</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="realname" v-model="realname"
                        placeholder="请输入姓名" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" value="男" title="男" id="sex-1" v-model="sex" name="sex">
                    <input type="radio" value="女" title="女" id="sex-2" v-model="sex" name="sex">
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">出生日期</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="birthday" v-model="birthday"
                        placeholder="请输入出生日期" @click="getDate4()" readonly="readonly" autocomplete="off" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">联系方式</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="contact" v-model="contact"
                        placeholder="请输入联系方式" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">提示问题</label>
                <div class="layui-input-block">
                    <select name="asksid" id="asksid" title="提示问题" id="asksid" >
                    </select>
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">问题答案</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="answer" v-model="answer"
                        placeholder="请输入问题答案" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" @click.prevent="update()">提交保存</button>
                    <button class="layui-btn" @click.prevent="reset()">取消重置</button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="./assets/js/axios.min.js"></script>
    <script type="text/javascript" src="./assets/js/vue.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript">
      const vue = new Vue({
			el: '#app',// 绑定作用域
			data: { //定义数据用于vue的双向绑定
				usersid: '',
				username: '', // 观众名
				password: '', // 密码
				realname: '', // 姓名
				sex: '男', // 性别
				birthday: '', // 出生日期
				contact: '', // 联系方式
				asksid: '', // 提示问题
				answer: '', // 问题答案
			},
			methods: {
				getUrlParam: function () {
					var name, value;
					var str = location.href; // 取得整个地址栏
					var num = str.indexOf("?"); // 定位参数起始位置
					str = str.substr(num + 1); // 取得所有参数 
					var arr = str.split("&"); // 各个参数放到数组里
					for (var i = 0; i < arr.length; i++) {
						num = arr[i].indexOf("=");
						if (num > 0) {
							name = arr[i].substring(0, num);
							value = arr[i].substr(num + 1);
							this.usersid = value; // 确认主键参数
						}
					}
				},
				loadPage: function () {
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/users/getUsersById.action?id=' + _this.usersid).then(result => {
						_this.username= result.data.username;
						_this.password= result.data.password;
						_this.realname= result.data.realname;
						_this.sex= result.data.sex;
						_this.birthday= result.data.birthday;
						_this.contact= result.data.contact;
						_this.asksid= result.data.asksid;
						_this.answer= result.data.answer;
					axios.get('http://localhost:8080/vue_gxhfztjxt/asks/getAllAsks.action').then(result => {
						// _this.asks = result.data;
                      var myOptions = '';
                      for (var i = 0; i < result.data.length; i++) {
                          if (_this.asksid == result.data[i].asksid) {
                              myOptions += '<option value="' + result.data[i].asksid + '" selected >' + result.data[i].questions + '</option>';
                          } else {
                                    myOptions += '<option value="' + result.data[i].asksid + '" >' + result.data[i].questions + '</option>';
                          }
                       }
                       $("#asksid").empty();
                       $("#asksid").html(myOptions);
					});
					});
				},
				reset: function () {
					this.loadPage();
				},
				update: function () {
					let _this = this;
					var data = {
						usersid: _this.usersid,
						username: _this.username,
						password: _this.password,
						realname: _this.realname,
				sex: $('input:radio[name=sex]:checked').val(), // 性别
						birthday: _this.birthday,
						contact: _this.contact,
						asksid: $('#asksid').val(),
						answer: _this.answer,
					};
					axios.post('http://localhost:8080/vue_gxhfztjxt/users/updateUsers.action', data).then(result => {
						if (result.data.code > 0) {
							var index = parent.layer.getFrameIndex(window.name);
							parent.location.reload();
							parent.layer.close(index);
						} else {
							alert('修改失败');
						}
					});
				},
				getDate4: function () { // 日历点击事件
                    var _this = this;
                    layui.use('laydate', function() {
                        var laydate = layui.laydate;
                        laydate.render({
                            elem: '#birthday',
                            show: true,
                            done: function(value) {
                                _this.birthday = value;
                            }
                        })
                    })
				},
			},

			created() { // 生命周期相关的函数
              layui.use(['element', 'layer', 'form'], function() {
                var $ = layui.jquery; // jquery
              });
				this.getUrlParam();
				this.loadPage();
				let _this = this;
			},
		})
	</script>

</body>
<!--作者联系 QQ 1420527913   毕设成品下载网址  codebag.cn-->
</html>


